<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Bugout demo server</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/mode/javascript/javascript.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/addon/edit/matchbrackets.min.js"></script>
  <link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.css" rel="stylesheet">
  <script src="//cdn.rawgit.com/papnkukn/qrcode-svg/master/dist/qrcode.min.js"></script>
  <script src="bugout.min.js" type="application/javascript"></script>
  <script src="//cdn.jsdelivr.net/npm/qrcode@latest/build/qrcode.min.js"></script>
</head>
<body>
<textarea id="api" rows="20"></textarea>
<button id="reload">reload</button>
<pre id="log"></pre>
</body>
<script>
  log("*BUGOUT*\n");
  log("Server log started.\n");

  // instantiate our bugout instance
  var b = new Bugout({seed: localStorage["bugout-demo-server-seed"]});

  // save the seed for next time
  localStorage["bugout-demo-server-seed"] = b.seed;

  // log this server's address
  log("\nThis browser tab is running a Bugout server.");
  log("This server's address:", b.address());
  log("announcing...");

  /*** logging ***/

  // log when network connectivity changes
  var connected = false;
  b.on("connections", function(c) {
    if (c == 0 && connected == false) {
      connected = true;
      log("ready");
      // link to the messageboard client URL
      var clientURL = document.location.href.replace("server.html", "") + "#" + b.address();
      // qrcode for the client URL
      if (window.innerWidth > 600) {
        log(qr(clientURL));
      } else {
        log();
      }
      log(clientURL + "\n");
      log("Connect back to this server-in-a-tab using the link above.");
    }
    log("connections:", c);
  });

  // log when a client sends a message
  b.on("message", function(address, msg) { log("message:", address, msg); });

  // log when a client makes an rpc call
  b.on("rpc", function(address, call, args) { log("rpc:", address, call, args); });

  // log when we see a new client address
  b.on("seen", function(address) { log("seen:", address); });

  // simple logging function
  function log() {
    var args = Array.prototype.slice.call(arguments);
    console.log.apply(null, args);
    args = args.map(function(a) { if (typeof(a) == "string") return a; else return JSON.stringify(a); });
    document.getElementById("log").textContent += args.join(" ") + "\n";
  }

  // generate a text based qr code

  function qr(txt) {
    var q = QRCode.create(txt);
    var code = "\n\n";
    for (var i=0; i<2; i++) {
      code += "  ████";
      for (var j=0; j<q.modules.size; j++) {
        code += "██";
      }
      code += "████\n";
    }
    for (var i=0; i<q.modules.size; i++) {
      code += "  ████";
      for (var j=0; j<q.modules.size; j++) {
        code += q.modules.data[i * q.modules.size + j] ? "  " : "██";
      }
      code += "████\n";
    }
    for (var i=0; i<2; i++) {
      code += "  ████";
      for (var j=0; j<q.modules.size; j++) {
        code += "██";
      }
      code += "████\n";
    }
    return code + "\n\n";
  }

  /*** API editing ***/

  // reference to the API code textarea
  var api = document.getElementById("api");

  // add a codemirror editor
  var editor = CodeMirror.fromTextArea(document.getElementById("api"), {
    lineNumbers: true,
    matchBrackets: true,
    continueComments: "Enter",
    viewportMargin: Infinity,
    extraKeys: {"Ctrl-Q": "toggleComment"}
  });

  // function to reload the API from the textarea
  function reload(code) {
    if (code) {
      editor.getDoc().setValue(code);
    }
    editor.save();
    b.api = {};
    eval(api.value);
    localStorage["bugout-demo-api"] = api.value;
  }

  // when the user clicks the reload button
  document.getElementById("reload").onclick = function() {
    reload();
  }
</script>
<script id="api-source">// Bugout demo server API code
// Edit this to change the live API this server is running:

// respond to ping calls by sending back "pong"
b.register("ping", function(pk, args, cb) {
  args["pong"] = true;
  cb(args);
}, "Respond to ping with 'pong'.");
</script>
<script>reload(document.getElementById("api-source").innerHTML);</script>
<style>
  body { background-color: #333; margin: 0px }
  pre { color: #eee; white-space: pre-wrap; word-wrap: break-word; line-height: 1em; margin: 1em; }
  .CodeMirror { height: auto; }
  #reload {
    border-radius: 5px;
    background-color: #008C28;
    color: white;
    border: none;
    padding: 0.25em 1em;
    font-size: 1.25em;
    margin: 0.5em;
  }
</style>
</html>
